<script>
import { getNews, addNews } from '@/api/news.js'
import { formatDate } from '@/utils/index.js'
export default {
  data() {
    return {
      newData: [],
      dialogFormVisible: false,
      newsForm: {
        title: '',
        content: '',
        type: '',
        initiator: ''
      },
      rules: {
        title: [{ required: true, message: '请输入通知标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入通知内容', trigger: 'blur' }],
        type: [{ required: true, message: '类型', trigger: 'blur' }],
        initiator: [{ required: true, message: '发布人', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getNews()
  },
  methods: {
    async showAddNewsDialog() {
      this.dialogFormVisible = true
    },
    async addNews() {
      this.$refs.formDateRef.validate(async valid => {
        if (valid) {
          const res = await addNews(this.newsForm)
          console.log(res)
          this.$message.success('添加新闻成功！')
          this.dialogFormVisible = true
          this.dialogFormVisible = false
          this.getNews() // 刷新新闻列表
          this.resetNewsForm()
        }
      })
    },
    resetNewsForm() {
      this.newsForm.title = ''
      this.newsForm.content = ''
      this.newsForm.type = ''
      this.newsForm.initiator = ''
    },
    formatDate,
    async getNews() {
      const res = await getNews()
      this.newData = res.records
    }
  }

}
</script>

<template>
  <div class="newbox_container">
    <div style="display: flex;justify-content: flex-end;margin-top:10px;">
      <el-button type="primary" plain @click="showAddNewsDialog">添加通知</el-button>
    </div>
    <el-card v-for="(item, index) in newData" :key="index" class="box-card">
      <div slot="header" class="clearfix">
        <span>主机通知</span>

        <el-tag v-if="item.type == 0" type="success" style="float: right">正常</el-tag>
        <el-tag v-if="item.type == 1" type="danger" style="float: right">紧急</el-tag>
        <el-tag v-if="item.type == 2" type="warning" style="float: right">特殊</el-tag>
      </div>
      <el-collapse>
        <el-collapse-item :title="item.title">
          <div>
            <p>{{ item.content }}</p>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-row style="margin-top: 50px;align-items: center;" type="flex">
        <el-col :span="14" style="font-size: 14px;">发布人:{{ item.initiator }}</el-col>
        <el-col :span="5" style="font-size: 14px;">发布时间:{{ formatDate(item.releaseDate) }}</el-col>
        <el-col :span="5" style="font-size: 14px;">修改时间:{{ formatDate(item.updateTime) }}</el-col>
      </el-row>
    </el-card>

    <el-dialog title="添加新闻" :visible.sync="dialogFormVisible">
      <el-form ref="formDateRef" :model="newsForm" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="newsForm.title" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="newsForm.content" type="textarea" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="newsForm.type" placeholder="请选择类型">
            <el-option label="正常" value="0" />
            <el-option label="紧急" value="1" />
            <el-option label="特殊" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="发布人" prop="initiator">
          <el-input v-model="newsForm.initiator" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNews">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style scoped>
.newbox_container {
  width: 99%;
}

.box-card {
  margin-top: 10px;
}

.el-dialog {
  width: 40%;
  margin: 30px auto;
}
</style>
